<template>
  <div class="box-main">
    <div class="topHeaderCard">
      <a-button type="primary" @click="resetBack" :icon="h(ArrowLeftOutlined)" ghost>
        返回
      </a-button>
    </div>
    <div class="bax-main-content">
      <div class="page-content">
        <div class="page_left">
          <!-- 患者信息 -->
          <div class="info_card">
            <div class="title-name" style="justify-content: space-between">
              <div style="display: flex; align-items: center; font-weight: 600">
                <span class="text-icon" />
                基础信息
              </div>
              <!-- <a-button type="primary" ghost @click="patientInfoHandle" size="small">
                更多信息
                <RightOutlined />
              </a-button> -->
            </div>
            <div class="card_top">
              <img
                :src="
                  patientInfo && patientInfo.gender
                    ? patientInfo.gender == '男性'
                      ? manPic
                      : womanPic
                    : userPic
                "
                alt=""
              />
              <div class="patient_info">
                <div class="base_info">
                  <p>
                    <span class="name">{{ patientInfo ? patientInfo.patName : '' }}</span>
                    <span>{{ patientInfo ? patientInfo.age : '' }}岁</span>
                    <span>{{ patientInfo ? patientInfo.gender : '' }}</span>
                  </p>
                </div>
                <div class="base_info">
                  <p>
                    证件号:
                    <span>{{ patientInfo ? patientInfo.idNo : '' }}</span>
                  </p>
                </div>
                <div class="base_info">
                  <p>
                    联系电话:
                    <span>{{ patientInfo ? patientInfo.phone : '' }}</span>
                  </p>
                </div>
                <div class="base_info">
                  <p>
                    家庭地址:
                    <span>{{ patientInfo ? patientInfo.address : '' }}</span>
                  </p>
                </div>
                <!-- <div class="base_info">
                  <p>
                    风险评分:
                    <span
                      @click="riskSorceHandle"
                      :style="{
                        color: patientInfo && patientInfo.score ? '#00B42A' : '',
                        'margin-right': '2px',
                        cursor: 'pointer'
                      }"
                    >
                      {{ patientInfo ? patientInfo.score : '' }}
                    </span>
                    <span v-if="patientInfo && patientInfo.score">分</span>
                  </p>
                </div> -->

                <div class="base_info">
                  <p>
                    管理路径:
                    <template v-if="patientManaPath">
                      <span
                        @click="manaPathInfo(item)"
                        v-for="(item, index) in patientManaPath"
                        :key="index"
                        style="color: #3491fa; cursor: pointer"
                      >
                        {{ item.label }}
                        <i v-if="patientManaPath.length > 1 && index < patientManaPath.length - 1"
                          >,</i
                        >
                      </span>
                    </template>
                    <span v-else>暂无</span>
                  </p>
                </div>
              </div>
            </div>
            <div class="card_bottom">
              <div class="tags">
                <div class="tags-title">
                  <div class="title-name">
                    <span class="text-icon" />
                    风险疾病
                  </div>
                  <!-- <a-button
                    class="btn-more"
                    type="link"
                    v-if="patientDisease && patientDisease.length > 1"
                    @click="showMoreRiskDatas('')"
                    >更多风险疾病</a-button
                  > -->
                </div>
                <div class="illness-btn-group">
                  <span v-if="!patientDisease || patientDisease.length == 0">无</span>
                  <a-tag
                    color="#FFF7E8"
                    class="illness-btn"
                    v-for="(item, index) in patientDisease"
                    style="color: #ff7d00; border-color: #ff7d00"
                    :key="index"
                  >
                    {{ item ? item.labelName : '' }}
                  </a-tag>
                </div>
              </div>
              <div class="tags">
                <div class="tags-title">
                  <div class="title-name">
                    <span class="text-icon" />
                    确诊疾病
                  </div>
                  <!-- <a-button
                    class="btn-more"
                    type="link"
                    v-if="patientDiagData.length > 2"
                    @click="showMoreDiagDatas('')"
                    >更多确诊疾病</a-button
                  > -->
                </div>
                <div class="illness-btn-group">
                  <span v-if="patientDiagData.length === 0">无</span>
                  <a-tag
                    color="#E8F7FF"
                    class="illness-btn"
                    v-for="(item, index) in patientDiagData"
                    style="color: #3491fa; border-color: #3491fa"
                    :key="index"
                  >
                    {{ item ? item.labelName : '' }}
                  </a-tag>
                </div>
              </div>
              <div class="tags">
                <div class="tags-title">
                  <div class="title-name">
                    <span class="text-icon" />
                    管理标签
                  </div>
                  <a-button
                    v-if="!editLabelTag"
                    size="small"
                    :icon="h(SettingOutlined)"
                    @click="showEditTagModal"
                  >
                    管理
                  </a-button>
                  <a-button v-else size="small" type="primary" ghost @click="saveLabelTag"
                    >完成</a-button
                  >
                </div>
                <div class="illness-btn-group">
                  <span v-if="labelList.length === 0 && !editLabelTag">无</span>
                  <a-tag
                    color="#E8FFEA"
                    class="illness-btn"
                    v-for="(item, index) in labelList"
                    style="color: #00b42a; border-color: #00b42a"
                    :key="item.labelName"
                    :closable="editLabelTag"
                    @close="handleClose(index)"
                  >
                    <template #closeIcon>
                      <CloseOutlined style="color: #00b42a" />
                    </template>
                    {{ item.labelName }}
                  </a-tag>
                  <a-tag
                    color="#E8FFEA"
                    class="illness-btn"
                    style="color: #00b42a; border-color: #00b42a"
                    v-if="editLabelTag"
                    @click="addLabelTag"
                  >
                    <template #icon>
                      <PlusOutlined />
                    </template>
                    增加标签
                  </a-tag>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="page_right">
          <a-tabs v-model:activeKey="activeKey" @change="tabsKeyChange">
            <a-tab-pane key="1" tab="体检信息">
              <ExamInfo ref="examInfoRef" />
            </a-tab-pane>
            <a-tab-pane key="8" tab="健康档案">
              <HealthRecords ref="healthRecordsRef" />
            </a-tab-pane>
            <a-tab-pane key="2" tab="健康监测">
              <SignsInfo ref="signsInfoRef" />
            </a-tab-pane>
            <a-tab-pane key="3" tab="健康信息">
              <HealthInfo ref="healthInfoRef" />
            </a-tab-pane>
            <a-tab-pane key="4" tab="就诊记录">
              <VisitRecords ref="visitRecordsRef" />
            </a-tab-pane>
            <a-tab-pane key="5" tab="随访记录">
              <followUp ref="followUpRef" />
            </a-tab-pane>
            <a-tab-pane key="6" tab="减重日记">
              <diary ref="diaryRef" />
            </a-tab-pane>
            <a-tab-pane key="7" tab="饮食记录">
              <foodRecord ref="foodRecordRef" />
            </a-tab-pane>
          </a-tabs>
        </div>
      </div>
    </div>

    <PatientInfoModal ref="patientInfoRef" />
    <!-- 风险疾病 -->
    <a-modal
      v-model:open="riskInfoVisible"
      :title="riskInfoTitle"
      :footer="null"
      :width="800"
      :bodyStyle="{ height: '500px' }"
      wrapClassName="risk-info-tabs"
    >
      <a-tabs
        v-model:activeKey="riskInfoSelIndex"
        :tab-position="'left'"
        animated
        style="height: 100%"
        @change="riskInfoSelChange"
      >
        <a-tab-pane
          v-for="(item, index) in patientDisease"
          :key="index"
          :tab="item ? item.labelName : ''"
          style="height: 460px; overflow: hidden auto"
        >
          <div class="title-name">风险因素</div>
          <div class="illness-btn-group-modal">
            <a-tag
              color="#FFF7E8"
              v-for="(item, index) in riskElements"
              style="color: #ff7d00; border-color: #ff7d00"
              :key="index"
            >
              {{ item }}
            </a-tag>
          </div>
          <div class="title-name">推荐检验检查</div>
          <div class="illness-btn-group-modal">
            <a-tag
              color="#E8F7FF"
              style="color: #3491fa; border-color: #3491fa"
              v-for="(item, index) in suggestExamList"
              :key="index"
            >
              {{ item }}
            </a-tag>
          </div>
        </a-tab-pane>
      </a-tabs>
    </a-modal>
    <!-- 确诊疾病 -->
    <a-modal
      v-model:open="illnessInfoVisible"
      :title="illnessInfoTitle"
      :footer="null"
      :width="800"
      :bodyStyle="{ height: '500px' }"
    >
      <a-tabs v-model:activeKey="illnessTagSelectIndex" type="card" style="height: 100%">
        <a-tab-pane
          v-for="(item, index) in keysInOrder"
          :key="index"
          style="height: 460px; overflow: hidden auto"
        >
          <template #tab>
            <span>
              {{ item }}({{
                illnessInfoData && illnessInfoData[item] ? illnessInfoData[item].length : 0
              }})</span
            >
          </template>
          <div class="title-name">{{ item }}</div>
          <div class="illness-btn-group-modal">
            <a-tag
              v-for="ele in illnessInfoData[item]"
              :key="ele"
              color="#FFECE8"
              style="color: #f53f3f; border-color: #f53f3f"
            >
              {{ ele.labelName }}
            </a-tag>
          </div>
        </a-tab-pane>
      </a-tabs>
    </a-modal>

    <!-- 管理标签 -->
    <a-modal
      v-model:open="labelVisible"
      title="选择标签"
      :width="600"
      :bodyStyle="{ height: '80px' }"
      @ok="addLabelHandle"
    >
      <a-form ref="labelFormRef" :model="labelForm" :rules="labelRules">
        <a-form-item name="manaLabel" label="管理标签">
          <a-select
            v-model:value="labelForm.manaLabel"
            mode="multiple"
            placeholder="请选择管理标签"
            style="width: 100%"
            :options="patLabelList"
          />
        </a-form-item>
      </a-form>
    </a-modal>

    <PlanPushPlanHis ref="planPushPlanHisRef" @goPage="goPage" />
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, h } from 'vue'
import {
  getPatientInfo,
  getPatientDiag,
  getPatientRisk,
  getPatientRiskDetail,
  getPatientDiagnosis,
  getPatientManage,
  getPatientLabel,
  savePatientManage,
  getPatientPath
} from '@/api/patientMana/index'
import manPic from '@/assets/patient/man.png'
import womanPic from '@/assets/patient/woman.png'
import userPic from '@/assets/user.png'
import {
  ArrowLeftOutlined,
  RightOutlined,
  SettingOutlined,
  PlusOutlined,
  CloseOutlined
} from '@ant-design/icons-vue'
import ExamInfo from './examInfo/index.vue'
import SignsInfo from './signsInfo/index.vue'
import HealthInfo from './health-info/index.vue'
import VisitRecords from './visit-records/index.vue'
import PatientInfoModal from './patient-info.vue'
import followUp from './followUp/index.vue'
import diary from './diary/index.vue'
import foodRecord from './foodRecord/index.vue'
import HealthRecords from './healthRecords/index.vue'
import { Empty, Modal, message } from 'ant-design-vue'
import { useRouter } from 'vue-router'
import PlanPushPlanHis from '@/views/healthManaWorkbench/implement/planPushPlanHis.vue'

const router = useRouter()
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE
const emit = defineEmits(['close'])

const healthRecordsRef = ref()
const examInfoRef = ref()
const signsInfoRef = ref()
const estimateSuggestionRef = ref()
const healthInfoRef = ref()
const visitRecordsRef = ref()
const diaryRef = ref()
const foodRecordRef = ref()

const patientEmpi = ref()
const patientInfo = ref<any>({})

const activeKey = ref('1')
const patientDisease: any = ref([])
const patientDiagData = ref([])

// 更多疾病信息
const riskInfoVisible = ref(false)
const riskInfoTitle = ref('')
const riskElements = ref([])
const suggestExamList = ref([])
const riskInfoSelIndex = ref(0)

const illnessInfoVisible = ref(false)
const illnessInfoTitle = ref('')
const illnessInfoData = ref([])
const illnessTagSelectIndex = ref(0)

// 风险评分
const riskScoreVisible = ref(false)
const riskData = ref([])
const riskInfoData = ref({})
const riskColums = ref([
  {
    title: '指标项',
    dataIndex: 'element',
    key: 'element'
  },
  {
    title: '值',
    dataIndex: 'value',
    key: 'value'
  },
  {
    title: '得分',
    dataIndex: 'score',
    key: 'score'
  }
])

// 管理标签
const patLabelList = ref([])

// 随访表单
const followUpRef = ref()

const patientManaPath = ref()
const initRouterInfo = (query) => {
  init(query, query.type, query.labelName)
}

const peOrgId = ref('')
const singsLabelName = ref('')
const init = (data, tabIndex?: any, labelName?: any) => {
  singsLabelName.value = labelName
  activeKey.value = tabIndex ? tabIndex : '1'
  patientDiagData.value = []
  patientDisease.value = []
  patientInfo.value = {}
  riskScoreVisible.value = false
  riskInfoData.value = {}
  patientManaPath.value = null
  // riskData.value = []
  if (data) {
    peOrgId.value = data.peOrgId ? data.peOrgId : ''
    riskInfoData.value = data
    // if (data.riskElements) {
    //   riskData.value = data.riskElements ? JSON.parse(data.riskElements) : []
    // }
    patientEmpi.value = data.empi
    getPatientInfo({ empi: data.empi }).then((res) => {
      patientInfo.value = res.data
    })

    // 风险疾病
    getPatientRisk({ empi: data.empi }).then((res) => {
      patientDisease.value = res.data
    })

    // 确诊
    getPatientDiag({ empi: data.empi }).then((res) => {
      if (res.data) {
        patientDiagData.value = res.data
      }
    })

    getLabelList()

    // 获取当前患者所有的管理路径
    getPatientPath({ empi: data.empi }).then((res) => {
      if (res.data) {
        patientManaPath.value = res.data
      }
    })

    // 获取所有的管理标签
    getPatientManage().then((res) => {
      console.log(res)
      patLabelList.value = res.data.map((vo: any) => {
        return {
          label: vo.labelName,
          value: vo.labelCode,
          id: vo.id
        }
      })
    })

    tabsKeyChange(activeKey.value)
    // nextTick(() => {
    //   examInfoRef.value.init(patientEmpi.value)
    // })
  }
}

// 管理标签
const editLabelTag = ref<boolean>(false)
const labelVisible = ref<boolean>(false)
const labelFormRef = ref()
const labelForm = reactive<any>({
  manaLabel: []
})
const labelRules = {
  manaLabel: [
    {
      required: true,
      message: '请选择管理标签',
      trigger: 'change'
    }
  ]
}
const labelList = ref([])

// 获取标签
const getLabelList = () => {
  getPatientLabel({ empi: patientEmpi.value }).then((res) => {
    labelList.value = res.data

    labelForm.manaLabel = res.data.map((vo: any) => {
      return vo.labelCode
    })
  })
}

const showEditTagModal = () => {
  editLabelTag.value = true
}

// 展示选择框
const addLabelTag = () => {
  labelVisible.value = true
}

// 删除标签
const handleClose = (index: any) => {
  labelList.value.splice(index, 1)
  labelList.value = [...labelList.value]

  labelForm.manaLabel = labelList.value.map((vo: any) => {
    return vo.labelCode
  })
  if (labelList.value.length === 0) {
    labelForm.manaLabel = []
  }
}

// 增加标签
const addLabelData = ref<any>([])
const addLabelHandle = () => {
  labelFormRef.value
    .validate()
    .then(() => {
      console.log('labelForm', labelForm)
      addLabelData.value = labelForm.manaLabel.map((vo) => {
        return {
          labelCode: vo,
          labelName: patLabelList.value.filter((item: any) => item.value === vo)[0].label
        }
      })
      labelVisible.value = false

      console.log(addLabelData.value)
      labelList.value = JSON.parse(JSON.stringify(addLabelData.value))
    })
    .catch((error: any) => {
      console.log('error', error)
    })
}

// 保存标签
const saveLabelTag = () => {
  editLabelTag.value = false
  console.log(labelList.value)
  const data = {
    empi: patientEmpi.value,
    peStaffName: patientInfo.value.patName,
    peOrgId: peOrgId.value,
    labelInfoVOList: labelList.value
  }
  console.log(data)
  savePatientManage(data).then(() => {
    message.success('保存成功')
    getLabelList()
  })
}

const planPushPlanHisRef = ref()
const manaPathInfo = (data) => {
  const param = {
    empi: patientEmpi.value,
    diseaseType: data.type
  }
  // 历史方案执行情况
  nextTick(() => {
    planPushPlanHisRef.value.init(param)
  })
}

const tabsKeyChange = (value) => {
  switch (value) {
    case '1':
      nextTick(() => {
        examInfoRef.value.init(patientEmpi.value)
        if (foodRecordRef.value) {
          foodRecordRef.value.init(patientEmpi.value, false)
        }
      })
      break
    case '2':
      nextTick(() => {
        signsInfoRef.value.init(patientEmpi.value, patientInfo.value, singsLabelName.value)
        if (foodRecordRef.value) {
          foodRecordRef.value.init(patientEmpi.value, false)
        }
      })
      break
    case '3':
      nextTick(() => {
        healthInfoRef.value.init(patientEmpi.value)
        if (foodRecordRef.value) {
          foodRecordRef.value.init(patientEmpi.value, false)
        }
      })
      break
    case '4':
      nextTick(() => {
        visitRecordsRef.value.init(patientEmpi.value)
        if (foodRecordRef.value) {
          foodRecordRef.value.init(patientEmpi.value, false)
        }
      })
      break
    case '5':
      nextTick(() => {
        followUpRef.value.init(patientEmpi.value, riskInfoData.value.taskId)
        if (foodRecordRef.value) {
          foodRecordRef.value.init(patientEmpi.value, false)
        }
      })
      break
    case '6':
      nextTick(() => {
        diaryRef.value.init(patientEmpi.value)
        if (foodRecordRef.value) {
          foodRecordRef.value.init(patientEmpi.value, false)
        }
      })
      break
    case '7':
      if (riskInfoData.value.dietDate) {
        const date = riskInfoData.value.dietDate
        nextTick(() => {
          foodRecordRef.value.init(patientEmpi.value, true, date)
        })
      } else {
        nextTick(() => {
          foodRecordRef.value.init(patientEmpi.value, true)
        })
      }
      break
    case '8':
      nextTick(() => {
        healthRecordsRef.value.init(patientEmpi.value)
        if (foodRecordRef.value) {
          foodRecordRef.value.init(patientEmpi.value, false)
        }
      })
      break
    default:
      break
  }
}

// 历史路径执行情况详情
const goPage = (data) => {
  // console.log(data)
  initRouterInfo(data)
  // nextTick(() => {
  //   patientInfoRef.value.initRouterInfo(data)
  // })
}

// 患者更多信息
const patientInfoRef = ref()
const patientInfoHandle = () => {
  patientInfoRef.value.init(patientInfo.value)
}

// 查看风险评分
const riskSorceHandle = () => {
  if (riskData.value.length) {
    riskScoreVisible.value = true
  } else {
    message.warning('暂无风险评分信息')
  }
  // getPatientScore({ empi: patientEmpi.value, subLabelCode: patientInfo.value.labelCode }).then(
  //   (res) => {
  //     riskInfoData.value = res.data
  //     if (res.data) {
  //       riskScoreVisible.value = true
  //       riskData.value = res.data.riskElements ? JSON.parse(res.data.riskElements) : []
  //     } else {
  //       message.warning('暂无风险评分信息')
  //       riskScoreVisible.value = false
  //     }
  //   }
  // )
}

// 风险信息 tabs切换
const riskInfoSelChange = (value) => {
  riskInfoSelIndex.value = value

  showMoreRiskDatas(patientDisease.value[value])
}

// 更多风险疾病
const showMoreRiskDatas = (data) => {
  riskInfoVisible.value = true
  riskInfoTitle.value = '风险信息'
  riskElements.value = []
  suggestExamList.value = []
  riskInfoSelIndex.value = 0
  if (data) {
    getPatientRiskDetail({
      empi: data.empi,
      labelCode: data.labelCode,

      riskLevel: data.riskLevel
    }).then((res) => {
      if (res.data) {
        if (res.data.riskElements) {
          riskElements.value = res.data.riskElements.split(',')
        }
        if (res.data.suggestExamList) {
          suggestExamList.value = res.data.suggestExamList.replace(/，/g, ',').split(',')
        }
      }
    })
  } else {
    getPatientRiskDetail({
      empi: patientDisease.value[0].empi,
      labelCode: patientDisease.value[0].labelCode,
      riskLevel: patientDisease.value[0].riskLevel
    }).then((res) => {
      if (res.data.riskElements) {
        riskElements.value = res.data.riskElements.split(',')
      }
      if (res.data.suggestExamList) {
        suggestExamList.value = res.data.suggestExamList.replace(/，/g, ',').split(',')
      }
    })
  }
}
const keysInOrder = ref(['管理疾病', '癌症', '慢病', '其他'])
// 更多确诊疾病
const showMoreDiagDatas = (data) => {
  illnessInfoTitle.value = '确诊信息'
  illnessInfoVisible.value = true
  illnessInfoData.value = []
  illnessTagSelectIndex.value = 0
  getPatientDiagnosis({ empi: patientEmpi.value }).then((res) => {
    illnessInfoData.value = res.data
    const keys = Object.keys(res.data)
    if (keys.length) {
      // keys.forEach((item) => {
      //   illnessInfoData.value.push({
      //     label: item,
      //     value: res.data[item]
      //   })
      // })
      if (data && data.labelName) {
        for (let i = 0; i < keysInOrder.value.length; i++) {
          if (res.data[keysInOrder.value[i]]) {
            const findData = res.data[keysInOrder.value[i]].filter(
              (ele) => ele.labelName === data.labelName
            )
            if (findData.length) {
              illnessTagSelectIndex.value = i
              break
            }
          }
        }
      }
    }
  })
}

//
const illnessInfoClick = (data, index) => {
  illnessTagSelectIndex.value = index
  // showMoreDiagDatas(data)
}

const resetBack = () => {
  router.replace({ query: {} })
  activeKey.value = '1'
  emit('close')
}

defineExpose({
  init,
  initRouterInfo
})
</script>
<style lang="less" scoped>
.box-main {
  width: 100%;
  height: 100%;
  padding: 0 !important;
  overflow: hidden !important;

  .topHeaderCard {
    display: flex;
    align-items: center;
    width: 100%;
    height: 48px;
    padding-left: 24px;
    background-color: #fff;

    ::v-deep(.ant-tabs-nav) {
      margin: 0;
    }

    ::v-deep(.ant-tabs-nav-wrap) {
      height: 48px;
      padding: 0 20px;
      padding-top: 2px;
    }
  }

  .bax-main-content {
    width: 100%;
    height: calc(100% - 50px);
    padding: 16px;
    overflow: hidden auto;

    .page-content {
      display: flex;
      width: 100%;
      height: 100%;

      .page_left {
        display: flex;
        flex-direction: column;
        width: 390px;
        height: 100%;
        margin-right: 16px;
      }

      .page_right {
        width: calc(100% - 400px);
        padding: 16px 12px 16px 24px;
        background: #fff;
        border-radius: 8px;
      }

      .info_card {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        padding: 24px;
        background: #fff;
        border-radius: 8px;

        .card_top {
          position: relative;
          display: flex;
          padding-bottom: 16px;

          img {
            width: 64px;
            height: 64px;
            margin-right: 16px;
            border-radius: 50%;
          }

          .patient_info {
            width: 100%;

            .base_info {
              display: flex;
              align-items: center;
              justify-content: space-between;
            }

            p {
              margin-bottom: 8px;
              font-size: 14px;
              font-weight: 400;
              color: #4e5969;

              span {
                margin-right: 16px;
              }

              .name {
                font-size: 20px;
                font-weight: 500;
                color: #1d2129;
              }

              .doctor_name {
                color: #1d2129;
              }
            }
          }
        }

        .card_bottom {
          height: calc(100% - 240px);
          padding-top: 16px;
          border-top: 1px dashed #e5e6eb;

          .tags {
            display: flex;
            flex-direction: column;
            align-items: normal;
            height: calc(33% - 10px);
            margin-bottom: 10px;
          }
        }
      }
    }
  }
}

.tags .tags-title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;

  .btn-more {
    padding-right: 0;
  }
}

.title-name {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  font-weight: 600;
}

.text-icon {
  display: inline-block;
  width: 3px;
  height: 16px;
  margin-right: 8px;
  line-height: 32px;
  background: #165dff;
}

.time_treat {
  font-weight: 600;
  color: #1d2129;
}

.time_title,
.time_content {
  font-size: 12px;
  color: #86909c;
}

.risk-info-label {
  padding-left: 8px;
  line-height: 40px;
  cursor: pointer;
}

.risk-info-label.action {
  background-color: #165cff69;
}

.illness-btn-group {
  max-height: calc(100% - 40px);
  padding: 8px 0 8px 16px;
  // white-space: nowrap;
  // text-overflow: ellipsis;
  overflow: hidden auto;
  // line-height: 40px;
  background: #f7f8fa;

  .illness-btn {
    margin-right: 8px;
    margin-bottom: 4px;
    cursor: pointer;
  }
}

.illness-btn-group-modal {
  padding-top: 8px;
  padding-left: 16px;
  background: #f7f8fa;

  .ant-tag {
    margin-bottom: 8px;
  }
}

.info-type {
  display: inline-block;
  margin: 10px 0;
  font-size: 12px;
  font-weight: 600;
}
</style>
<style>
.risk-info-tabs .ant-tabs-nav,
.risk-info-tabs .ant-tabs > div > .ant-tabs-nav {
  width: 110px;

  .ant-tabs-tab {
    padding: 8px 18px !important;
  }
}

.risk-info-tabs .ant-tabs .ant-tabs-tab-btn {
  word-break: break-all;
  word-wrap: break-word;
  white-space: normal;
}

.illness-btn-group .ant-tag > .anticon + span {
  margin-left: 0 !important;
}
</style>
